<template>
    <div class="addProject">
        <div class="addForm zll-form">
            <el-form :model="deptDetail" ref="addForm" class="demo-ruleForm"  v-if="type == 'add'">
                <div class="nav_organize">
                    <el-checkbox class="left_check" v-model="firstChecked" ></el-checkbox>
                    <el-form-item class="formList" label="一级部门：">
                        <el-input clearable class="input_right" placeholder="请输入一级部门" :disabled="!firstChecked" v-model="firstValue"  v-show="!secondChecked"></el-input>
						<el-select v-model="firstValue" v-show="secondChecked" @change="changeFirstCheck"
								   size="mini"
								   clearable>
							<el-option v-for="item in allDept"
									   :key="item.id"
									   :label="item.deptName"
									   :value="item.id"/>
						</el-select>
                    </el-form-item>
                </div>
				<div class="nav_organize">
					<el-checkbox class="left_check" v-model="secondChecked" :disabled="!firstChecked"></el-checkbox>
					<el-form-item class="formList" label="二级部门：">
						<el-input clearable class="input_right" placeholder="请输入二级部门" :disabled="!secondChecked"
								  v-show="!thirdChecked" v-model="secondValue"></el-input>
						<el-select v-model="secondValue" v-show="thirdChecked" @change="changeSecondCheck"
								   size="mini"
								   clearable>
							<el-option v-for="item in secondDept"
									   :key="item.id"
									   :label="item.deptName"
									   :value="item.id"/>
						</el-select>
					</el-form-item>
				</div>
				<div class="nav_organize">
					<el-checkbox class="left_check" v-model="thirdChecked" :disabled="!secondChecked"></el-checkbox>
					<el-form-item class="formList" label="三级部门：">
						<el-input clearable class="input_right" placeholder="请输入三级部门" :disabled="!thirdChecked"
								  v-model="thirdValue"></el-input>
					</el-form-item>
				</div>
            </el-form>
			<el-form :model="deptDetail" ref="addForm" class="demo-ruleForm" v-else>
				<div class="nav_organize">
					<el-form-item class="formList" label="上级部门：">
						<el-select v-model="deptDetail.pId" size="mini" clearable>
							<el-option v-for="item in allEditDept"
									   :key="item.id"
									   :label="item.deptName"
									   :disabled="item.id == deptDetail.id"
									   :value="item.id"/>
						</el-select>
					</el-form-item>
				</div>
				<div class="nav_organize">
					<el-form-item class="formList" label="部门名称：">
						<el-input clearable class="input_right"   v-model="deptDetail.deptName"></el-input>
					</el-form-item>
				</div>
			</el-form>
        </div>
    </div>
</template>
<script>
	import {getStore} from "@/plugins/localStore";
    export default {
		props: ['editData', 'deptList','type'],
        data(){
            return {
				count: 0,
				deptDetail: {id: "", deptName: "", deptLevel: "", pId: "", createUser: "", deptType: "1"},
				firstChecked: false,
				secondChecked: false,
				thirdChecked: false,
				fourChecked: false,

				firstValue: "",
				secondValue: "",
				thirdValue: "",
				fourValue: "",
				allDept: [],
				allEditDept: [],
				secondDept: [],
				thirdDept: [],
            }
        },
        methods: {
			getEditDepts(depts){
				if(depts.length > 0){
					for(let dept of depts){
						this.allEditDept.push(dept);
						if(dept.children){
							this.getEditDepts(dept.children);
						}
					}
				}
			},

			changeFirstCheck(val) {
				for (let data of this.allDept) {
					if (data.id == val) {
						this.secondDept = data.children;
					}
				}
			},

			changeSecondCheck(val) {
				for (let data of this.secondDept) {
					if (data.id == val) {
						this.thirdDept = data.children;
					}
				}
			},
			saveEditDept() {
				let self = this;
				if(!self.deptDetail.deptName){
					self.$notify({
						title: '提示',
						message: "部门名称不能为空！",
						type: 'warning'
					});
					return;
				}
				if (this.count == 0) {
					self.$http({
						url: "/jinl/dept/updateDeptDetail",
						method: "post",
						params: self.deptDetail
					}).then(resp => {
						if (resp.success) {
							self.$eventBus.$emit("getDeptList");
							self.$notify({
								title: '提示',
								message: "修改部门成功！",
								type: 'success'
							});
							return
						}
						self.$notify({
							title: '提示',
							message: resp.message,
							type: 'error'
						});
						this.count--;
					});
					this.count++;
				}

			},

			saveDept() {
				let self = this;
				if (!self.firstValue || (this.secondChecked && !this.secondValue)) {
					this.$notify({
						title: '提示',
						message: '请选择一级部门！',
						type: 'error',
						duration: 2000
					})
					return;
				}
				if (this.secondChecked && !this.secondValue) {
					this.$notify({
						title: '提示',
						message: '请选择二级部门！',
						type: 'error',
						duration: 2000
					})
					return;
				}
				if (this.thirdChecked && !this.thirdValue) {
					this.$notify({
						title: '提示',
						message: '请填写三级部门！',
						type: 'error',
						duration: 2000
					})
					return;
				}
				if (this.fourChecked && !this.fourValue) {
					this.$notify({
						title: '提示',
						message: '请填写四级部门！',
						type: 'error',
						duration: 2000
					})
					return;
				}
				if (!this.secondChecked) {
					this.deptDetail.deptName = this.firstValue;
					this.deptDetail.deptLevel = "1";
				}
				if (this.secondChecked && !this.thirdChecked) {
					this.deptDetail.deptName = this.secondValue;
					this.deptDetail.deptLevel = "2";
					this.deptDetail.pId = this.firstValue;
				}
				if (this.thirdChecked) {
					this.deptDetail.deptName = this.thirdValue;
					this.deptDetail.deptLevel = "3";
					this.deptDetail.pId = this.secondValue;
				}
				if (this.fourChecked) {
					this.deptDetail.deptName = this.fourValue;
					this.deptDetail.deptLevel = "4";
					this.deptDetail.pId = this.thirdValue;
				}
				if (this.count == 0) {
					self.$http({
						url: "/jinl/dept/addDeptDetail",
						method: "post",
						params: self.deptDetail
					}).then(resp => {
						if (resp.success) {
							self.$notify({
								title: '提示',
								message: "添加部门成功！",
								type: 'success'
							});
							self.$eventBus.$emit("getDeptList");
							return
						}
						self.$notify({
							title: '提示',
							message: resp.message,
							type: 'error'
						});
						this.count--;
					});
					this.count++;
				}
			}
        },
        mounted(){
        },
		watch: {
			deptList(val) {
				this.allDept = val;
				this.allEditDept = [];
				this.getEditDepts(val);
			},
			editData(val) {
				let user = getStore();
				this.deptDetail = {
					id: val.id || '',
					deptName: val.deptName || '',
					deptLevel: val.deptLevel || '',
					pId: val.pId || '',
					createUser: "",
					deptType: "0",
				};
				this.deptDetail.createUser = user.id;
				this.deptDetail.userName = user.userName;
				this.deptDetail.userId = user.id;
				this.count = 0;
				this.firstValue = "";
				this.secondValue = "";
				this.thirdValue = "";
				this.fourValue = "";
				this.secondChecked = false;
				this.thirdChecked = false;
				this.fourChecked = false;
				if (val.id) {
					this.changeFirstCheck(this.deptDetail)
				}
			},
			firstChecked(val) {
				this.secondDept = [];
				this.firstValue = "";
				this.secondValue = "";
				this.thirdValue = "";
				this.fourValue = "";
				if (!val) {
					this.secondChecked = false;
					this.thirdChecked = false;
					this.fourChecked = false;
				}
			},
			secondChecked(val) {
				this.firstValue = "";
				this.secondValue = "";
				this.thirdValue = "";
				this.fourValue = "";
				if (!val) {
					this.thirdChecked = false;
					this.fourChecked = false;
				}
			},
			thirdChecked(val) {
				this.firstValue = "";
				this.secondValue = "";
				this.thirdValue = "";
				this.fourValue = "";
				if (!val) {
					this.fourChecked = false;
				}
			},
			fourChecked(val) {
				this.firstValue = "";
				this.secondValue = "";
				this.thirdValue = "";
				this.fourValue = "";
			},
		},
    }
</script>
<style lang="scss" scoped>
@import "@/style/dialog.scss";
.addProject {
    .nav_organize {
        .left_check {
            width: 20px;
            float: left;
            height: 30px;
            line-height: 30px;
        }
        .formList {
            width: calc(100% - 20px);
            float: left;
        }
    }
}
</style>
